<template>
  <n-scrollbar x-scrollable style="max-height: 100vh">
    <CommonPage show-footer>
      <div>
        <n-form
            ref="form"
            :model="searchCondition"
            style="margin-top: -30px">
          <div style="display: flex;align-items: center;">
            <n-form-item>
              <label style="width: 70px;">品牌名称：</label>
              <n-input style="width: 170px;" v-model:value="searchCondition.name" placeholder="请输入品牌名称" clearable></n-input>
            </n-form-item>
            <n-form-item style="margin-left: 5px;">
              <n-button type="primary"  @click="searchByCondition">筛选</n-button>
            </n-form-item>
            <n-form-item style="margin-left: 10px">
              <n-button type="primary" @click="showForm=true">添加品牌</n-button>
            </n-form-item>
            <n-form-item style="margin-left: 10px">
              <n-button type="error" @click="deleteSelectBrands()">批量删除</n-button>
            </n-form-item>
            <n-form-item style="margin-left: 10px">
              <n-button type="primary" @click="exportListInfo">导出</n-button>
            </n-form-item>
          </div>
          <AddBrandForm :option="option" @update-page="searchByCondition" :show="showForm" :onClose="handleClose" />
          <UpdateBrandForm
              @update-page="searchByCondition"
              :show1="showForm1"
              :onClose="handleClose"
              :brand="currentBrand"
          />
          <n-data-table
              remote
              :single-line="false"
              ref="table"
              :columns="columns"
              :data="productBrandList"
              :loading="loading"
              :pagination="paginationReactive"
              :row-key="rowKey"
              :scroll-x="900"
              @update:checked-row-keys="handleCheck"
          />
        </n-form>
      </div>
    </CommonPage>
  </n-scrollbar>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import api from '@/api/admin';
import {useUserStore} from '@/store';
import {useRouter} from 'vue-router';
import {formatDate} from "@/utils";
import CategoryActions from "@/views/admin/category/components/category-actions.vue";
import AddBrandForm from './components/brand-add.vue';
import UpdateBrandForm from './components/brand-edit.vue';

const userStore = useUserStore()
const router = useRouter()
const loading = ref(true)
const productBrandList = ref([])
const range = ref(null)
const option = ref([
])
const showForm = ref(false);
const showForm1=ref(false);
const checkedRowKeysRef = ref([]);
const categoryBrand=ref(null);
const handleClose = () => {
  showForm.value = false;
  showForm1.value=false;
};
const searchCondition = ref({
  name: "",
});
const currentBrand = ref(null);
const columns = [
  {
    type: 'selection',
    fixed: 'left',
  },
  {
    key: 'colId',
    title: '序号',
    width: 60,
  },
  {
    key: 'id',
    title: '品牌编号',
    width: 70,
  },
  {
    key: 'name',
    title: '品牌名称',
    width: 100,

  },
  {
    key: 'shortName',
    title: '品牌简称',
    width: 100,
  },
  {
    key: 'adminName',
    title: '创建人',
    width: 100,
  },
  {
    key: 'createTime',
    title: '创建时间',
    width: 100,
  },
  {
    key: 'operation',
    title: '操作',
    width: 100,
    render(row) {
      return h(
        CategoryActions,
        {
          onClickDelete: () => onDeleteProductBrand(row),
          onClickEdit: () => onEditProductBrand(row),

        }
      );
    }
  },
]
let total = 0
const paginationReactive = reactive({
  page: 1,
  pageSize: 20,
  showSizePicker: true,
  pageSizes: [20, 50, 100],
  itemCount:0,
  prefix: () => {
    return '查询出 ' + total + '条记录';
  },
  onChange: (page) => {
    paginationReactive.page = page;
    queryByPage()
  },
  onUpdatePageSize: (pageSize) => {
    paginationReactive.pageSize = pageSize;
    paginationReactive.page = 1;
    queryByPage()
  }
});
const handleCheck = (rowKeys) => {
  checkedRowKeysRef.value = rowKeys;
}
const deleteSelectBrands = () => {
  if(checkedRowKeysRef.value.length <= 0) {
    $message.error("当前并未选择品牌！")
    return
  }
  $dialog.confirm({
    title: '警告',
    content: '您确定删除当前所选品牌？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const ids = checkedRowKeysRef.value.join(",")
      loading.value = true
      try {
        const res = await api.deleteProductBrands({params:{ids}})
        if(res.code === 200) {
          $message.success("删除所选品牌成功！")
          await searchByCondition()
        }
        else {
          $message.error(res.message)
        }
      } catch (err) {
        $message.error("删除所选品牌失败！")
      }finally{
        loading.value = false
      }
    },
  })
}
const searchByCondition = async ()=>{
  loading.value = true
  try {
    paginationReactive.page = 1;
    const res = await api.findPageProductBrand({
      params: {
        name:searchCondition.value.name,
        pageNum: paginationReactive.page,
        pageSize: paginationReactive.pageSize,
      }
    })
    if (res.code === 200) {
      total = res.data.total
      paginationReactive.itemCount = total
      const baseCount = (paginationReactive.page - 1)*paginationReactive.pageSize
      productBrandList.value = res.data.records.map((item,i)=>{
        return {...item,
          colId: baseCount + i + 1,
        }
      })
    } else {
      $message.error(res.message)
    }
  } catch (err) {
    $message.error("查询产品品牌失败！")
  } finally {
    loading.value = false
  }
}
const onDeleteProductBrand = async (productBrand) => {
  $dialog.confirm({
    title: '警告',
    content: '您确定删除当前品牌？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const {id} = productBrand
      loading.value = true
      try {
        const res = await api.deleteProductBrand({id})
        if (res.code === 200) {
          $message.success("删除品牌成功！")
          // await queryByPage()
          await searchByCondition()
        }
        else {
          $message.error(res.message)
        }
      } catch (err) {
        $message.error("删除产品品牌失败！")
      } finally {
        loading.value = false
      }
    }
  })

}
const onEditProductBrand = async (productBrand) => {
  const {id} = productBrand
  showForm1.value=true;
  currentBrand.value = productBrand;
}
const queryByPage = async ()=>{
  loading.value = true
  try {
    const res = await api.findPageProductBrand(
      {
        params:{
          pageNum:paginationReactive.page,
          pageSize:paginationReactive.pageSize,
        }
      })
    if(res.code === 200) {
      total = res.data.total
      paginationReactive.itemCount = total
      productBrandList.value = res.data.records.map((item,i)=>{
        return {
          ...item,
          colId: i+1
        }
      })
      $message.success("获取产品品牌成功！")
    }
    else {
      $message.error(res.message)
    }
  } catch (err) {
    $message.error("获取产品品牌失败！")
  }finally{
    loading.value = false
  }
}
const exportListInfo = async () => {
  const res = await api.exportProductBrandList({
    name: searchCondition.value.name,
  });
  const contentDisposition = res.headers["content-disposition"]
  let original_fileName = ""
  if(contentDisposition) {
    const uri = res.headers["content-disposition"].split("=")[1]
    original_fileName = window.decodeURI(uri)
  }
  const blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
  if(window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, original_fileName);
  } else{
    const fileName = original_fileName;
    const elink = document.createElement('a')
    document.body.appendChild(elink)
    elink.download= fileName;
    elink.style.display ="none"
    elink.href  = window.URL.createObjectURL(blob)
    elink.click()
    window.URL.revokeObjectURL(elink.href)
    document.body.removeChild(elink)
  }
}
const rowKey = (rowData) => {
  return rowData.id
}
onMounted(()=>{
  queryByPage()
})
</script>
<style scoped>
    :deep(.n-data-table-th__title),
    :deep(.n-data-table-td) {
        text-align: center;

    }
    :deep(.n-select) {
        width: 140px !important;
    }

    :deep(.two-line-description) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 控制显示的行数 */
        overflow: hidden;
    }

</style>
